<template>
  <div class="_wrapper _flex-y">
    <div>
      <com-select
        :dictList="dictServer"
        :model-value="selectServer"
        @update:modelValue="change"
      ></com-select>
    </div>
    <div class="_flex-item-1 _wrapper-x" v-if="selectServer">
      <com-xterm :sshOption="sshOption" />
    </div>
  </div>
</template>

<script>
import ComSelect from "@/components/com-select/com-select.vue";
import ComXterm from "@/components/com-xterm/com-xterm.vue";
import toolAction from "@/tool/http/tool-action";

let actionServer = toolAction.init("function_server");

export default {
  components: { ComXterm, ComSelect },
  data() {
    return {
      dictServer: [],
      selectServer: undefined,
    };
  },
  computed: {
    sshOption() {
      let option = this.dictServer.find(
        (item) => item.id === this.selectServer
      );
      return {
        host: option.link_address, //IP
        port: "22", //端口号
        username: option.account, //用户名
        password: option.password, //密码
      };
    },
  },
  mounted() {
    actionServer
      .list({
        rules: {
          enum_server_type__eq: "LINUX",
        },
      })
      .then((res) => {
        res.forEach((element) => {
          element.val = element.id;
        });
        this.dictServer = res;
      });
  },
  methods: {
    change(val) {
      this.selectServer = undefined;
      this.$nextTick(() => {
        this.selectServer = val;
      });
    },
  },
};
</script>

<style></style>
